<template>
  <div>
   <container :title="title" class="container">
     <dv-charts :option="option" />
    </container>
  </div>
</template>

<script>
import injectRootInstance from '@/components/datav/mixins/injectRootInstance'
export default {
  mixins: [injectRootInstance],
  computed: {
    title () {
      return this.rootThis.monthana.title
    },
    option () {
      return {
        xAxis: {
          name: '30天',
          data: this.rootThis.monthana.data.map((item, index) => index + 1),
          axisLabel: { show: true,
            style: {
              fill: '#ffffff',
              fontSize: 10,
              rotate: 0
            }
          }
        },
        yAxis: {
          name: '使用次数',
          data: 'value',
          splitLine: {
            show: false
          },
          axisLabel: { show: true,
            style: {
              fill: '#ffffff',
              fontSize: 10,
              rotate: 0
            }
          }
        },
        series: [
          {
            data: this.rootThis.monthana.data,
            type: 'line',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['#063F62', '#0E1655']
            },
            label: {
              show: true,
              formatter: '{value} 次'
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.container{
  height:311px;
}
</style>
